<template>
  <CURDDialog
    :create-title="t('aiot.serviceOrder.dispatchWorkOrder')"
    :show-options="showOptions"
    :model="model"
    :model-form-setting="modelFormSetting"
    :model-rules="modelRules"
    :curd="curd"
    :hide-next-add-btn="true"
    @before-ok="beforeVisit"
    @ok="$emit('ok')"
  />
  <SelectUserModal
    v-model:visible="chooseUserVisible"
    v-model:projectId="projectId"
    v-model:selectMode="selectUserMode"
    v-model:selectedUserIds="selectedUserIds"
    @ok="handleSelectedUser"
  />
</template>
<script setup lang="ts">
import { ref, watch, h } from "vue";
import { Api } from "/@/api/aiot/serviceWorkOrder";
import {
  CURDAction,
  CURDModalEvent,
  FormItemComponentType,
  FormItemData,
  ShowCURDModalOptions,
} from "../../CURDDialog/models";
import { DispatchWorkOrderItem, DispatchOptions } from "/@/api/aiot/serviceApply/models";
import { useI18n } from "/@/locales/useI18n";
import { useCURD } from "/@/hooks/useCURD";
import SelectInput from "/@/components/common/SelectInput.vue";

const { t } = useI18n();
const props = defineProps<{
  options: DispatchOptions;
}>();
defineEmits(["ok"]);
const projectId = ref<string>("");
watch(
  () => props.options,
  (v) => {
    if (!v) return;
    projectId.value = props.options.projectId;
    showOptions.value = { action: CURDAction.CREATE };
  }
);

const showOptions = ref<ShowCURDModalOptions>();

const { curd } = useCURD({
  createUrl: Api.dispatchWorkOrders,
});

const model = ref<DispatchWorkOrderItem>({
  operationUserName: "",
  helperUserName: "",
  operationUserId: "",
  helperUserIds: [],
  plannTime: "",
  opinion: "",
});
const modelRules = ["visitRecordTitle", "visitRecordContent", "visitRecordSuggestion"];
const selectUserMode = ref<"radio" | "checkbox">("radio");
const chooseUserVisible = ref<boolean>(false);
const chooseOperationUser = ref<boolean>(false);
const selectedUserIds = ref<Array<string>>(["bad4b3a8-21b9-4834-9338-93d4b7a7bcd9"]);
const modelFormSetting = ref<Array<FormItemData>>([
  {
    label: t("aiot.serviceApply.operationUser"),
    key: "operationUserName",
    required: true,
    // type: FormItemComponentType.TEXTAREA,
    customComponent: h(SelectInput, {
      onClick() {
        selectedUserIds.value = [model.value.operationUserId || ""];
        selectUserMode.value = "radio";
        chooseOperationUser.value = true;
        chooseUserVisible.value = true;
      },
    }),
  },
  {
    label: t("aiot.serviceApply.helperUser"),
    key: "helperUserName",
    // type: FormItemComponentType.TEXTAREA,
    customComponent: h(SelectInput, {
      onClick() {
        selectedUserIds.value = model.value.helperUserIds || [];
        selectUserMode.value = "checkbox";
        chooseOperationUser.value = false;
        chooseUserVisible.value = true;
      },
    }),
  },
  {
    label: t("aiot.serviceApply.plannTime"),
    key: "plannTime",
    required: true,
    type: FormItemComponentType.DATEPICKER,
    props: {
      showTime: { format: "HH:mm" },
      format: t("common.dateTimeFormatStr1"),
      valueFormat: t("common.dateTimeFormatStr1"),
    },
  },
  {
    label: t("aiot.serviceApply.opinion"),
    key: "opinion",
    max: 256,
    type: FormItemComponentType.TEXTAREA,
  },
  {
    key: "operationUserId",
    hide: true,
  },
  {
    key: "helperUserIds",
    hide: true,
  },
]);
function beforeVisit(e: CURDModalEvent) {
  if (e.model) {
    Object.assign(e.model, props.options);
  }
}
function handleSelectedUser({ userIds, selectedUsers }) {
  if (chooseOperationUser.value) {
    model.value.operationUserId = userIds[0];
    model.value.operationUserName = selectedUsers[0].userName;
  } else {
    model.value.helperUserIds = userIds;
    let helpUserArr = selectedUsers.map((item) => {
      return item.userName;
    });
    model.value.helperUserName = helpUserArr.join("，");
  }
}
</script>
